Apren p5.js - Cares Animades

1. Cara Estàtica

function setup() {
    createCanvas(200, 200);
}

function draw() {
    background(220);
    
    // Cap
    fill(255, 255, 0);
    ellipse(100, 100, 150, 160);
    
    // Ulls
    fill(0);
    ellipse(70, 80, 30, 30);
    ellipse(130, 80, 30, 30);
    
    // Boca
    noFill();
    arc(100, 130, 80, 40, 0, PI);
}

2. Cara amb Detalls

function setup() {
    createCanvas(200, 200);
    angleMode(DEGREES);
}

function draw() {
    background(170, 220, 255);
    
    // Cap
    fill(255, 205, 148);
    ellipse(100, 100, 150, 160);
    
    // Ulls
    fill(255);
    ellipse(70, 80, 40, 30);
    ellipse(130, 80, 40, 30);
    fill(0);
    ellipse(70, 80, 20, 20);
    ellipse(130, 80, 20, 20);
    
    // Celles
    strokeWeight(3);
    line(50, 60, 90, 65);
    line(110, 65, 150, 60);
    
    // Boca
    fill(255, 100, 100);
    arc(100, 140, 60, 40, 0, 180);
    
    // Nas
    strokeWeight(2);
    line(100, 100, 90, 120);
    line(90, 120, 110, 120);
}

3. Cara Animada

let angle = 0;

function setup() {
    createCanvas(200, 200);
}

function draw() {
    background(180, 200, 255);
    
    // Cap
    fill(255, 200, 150);
    ellipse(100, 100, 150, 160);
    
    // Ulls que segueixen el ratolí
    let pupilX = map(mouseX, 0, width, -5, 5, true);
    let pupilY = map(mouseY, 0, height, -5, 5, true);
    
    // Ull esquerre
    fill(255);
    ellipse(70, 80, 40, 30);
    fill(0);
    ellipse(70 + pupilX, 80 + pupilY, 15, 15);
    
    // Ull dret
    fill(255);
    ellipse(130, 80, 40, 30);
    fill(0);
    ellipse(130 + pupilX, 80 + pupilY, 15, 15);
    
    // Parpelleig
    if(frameCount % 120 < 5) { // Cada 2 segons
        fill(255, 200, 150);
        rect(50, 65, 40, 30);
        rect(110, 65, 40, 30);
    }
    
    // Boca que s'obre i es tanca
    let mouthY = sin(angle) * 5 + 130;
    fill(255, 100, 100);
    arc(100, mouthY, 60, 40, 0, PI);
    angle += 0.1;
}

Exercicis per Practicar

• Afegeix celles que es mouen amb el ratolí
• Crea canvis de color quan es cliqui el botó del ratolí
• Afegeix un barret que gira
• Fes que la cara pugui parlar obrint i tancant la boca
• Experimenta amb diferents expressions facials